page{
  /* 高度100% */
  // height: 100vh;
  /* CSS 中的 !important 规则用于增加样式的权重。
  !important 与优先级无关，但它与最终的结果直接相关，使用一个 !important 规则时，此声明将覆盖任何其他声明。 */
  background-color: #efefef !important;
  // display: flex;：这一行声明将一个元素设置为Flex容器。这意味着它的子元素（即flex items）将会按照Flexbox布局模型进行排列。
  // flex-direction: column;：这一行定义了Flex项目在容器中的排列方向。当设置为column时，子元素会沿着垂直轴（就像文本的流向那样，从上到下）排列，形成一列。
  display: flex;
  flex-direction: column;

  // 在CSS中，padding: 16rpx; 和 box-sizing: border-box; 这两条属性共同决定了元素的内边距（padding）以及盒模型的计算方式，影响元素的布局和尺寸表现。

// padding: 16rpx;：这条规则设置了元素所有边（上、右、下、左）的内边距为16rpx。内边距是内容区域与边框之间的空间。
// box-sizing: border-box;：这个属性定义了元素的盒模型计算方式。
// 默认情况下，许多浏览器使用content-box模型，其中元素的宽度和高度只包括内容的宽高，不包括边框（border）、内边距（padding）和外边距（margin）当设置为border-box时，元素的宽度和高度会包括内容、内边距和边框，但不包括外边距
// 结合使用，这两条规则会让元素有一个统一的16rpx内边距，同时确保设置的元素宽度和高度不会因为内边距或边框的增加而改变其占用的总空间大小，提高了布局的一致性和预测性。这对于实现预期的布局效果，尤其是在响应式设计和精确控制元素尺寸的场景下非常有帮助。
  padding: 16rpx;
  box-sizing: border-box;

  // 这里 > view 的意义是选择所有作为 page 元素直接子元素的 view，换句话说，只有那些直接被 page 包含而没有其他元素介于它们之间的 view 会被这个选择器匹配到。

  // 是否可以省略取决于想要选择的元素范围：
  // 如果省略: 不使用 >，例如写成 page view {...} 或者简写为 page view:nth-child(n+2) {...}，这样会选中 page 内部的所有 view 子元素，无论它们是直接子元素还是嵌套在其他元素内的后代元素。
  // 保留:nth-child(n+2): 即使在不使用 > 的情况下，:nth-child(n+2) 依然只会作用于每个父元素下的第二个及以后的子元素，但这个父元素在此上下文中扩大到了所有层级的 view，而不仅仅是 page 的直接子元素。
  // 尖括号 > 在这里用来确保样式仅应用于 page 下的直接 view 子元素，并且结合 :nth-child(n+2) 实现了从第二个子元素开始应用 margin-top。如果您的意图确实是只针对直接子元素，那么 > 是必要的；如果要放宽限制，使其也适用于嵌套的后代元素，则可以省略。

  > view{
    &:nth-child(n+2){
      margin-top: 16rpx;
    }
  }
}

// 轮播图区域样式
.swiper{
  border-radius: 10rpx;;
  overflow: hidden;

  swiper{
    height: 360rpx;
    background-color:skyblue;

    swiper-item{
      //& 在scss中代表的是父选择器，引用的意思
      // 代码会被解释为swiper-item:first-child
      image{
        border-radius: 10rpx;;
        overflow: hidden;
        height: 100%;
        width: 100%;
      }

      // 背景色，设置了填充图片的情况下可以注释掉
      // &:first-child{
      //   background-color: lightsalmon;
      // }
      // &::after{
      //   background-color: lightskyblue;
      // }
      // &:last-child{
      //   background-color: lightseagreen;
      // }
    }
  }
}

.info{
  // display: flex;：这一行声明将一个元素变为Flex容器。这意味着其直接子元素会成为Flex项目，并按照Flex布局规则进行排列。
  // justify-content: space-between;：这一行决定了Flex容器中子元素在主轴（默认为水平方向）上的对齐方式。当设置为space-between时，第一个子元素会紧贴容器的起始边缘，最后一个子元素则紧贴结束边缘，而容器中的剩余空间会均匀分布在除了首尾之外的每个子元素之间。换句话说，这会导致除了两端的项目外，所有相邻项目间拥有相等的间距。  
  display: flex;
  justify-content: space-between;
  background-color: white;
  padding: 16rpx;

  // border-radius: 10rpx;：这条规则指定了元素的圆角大小。每个角的半径被设置为10rpx，这会使元素的边角呈现圆形或椭圆形，具体形状取决于元素的宽高比例。
  // overflow: hidden;：这个属性决定了当元素内容超出了其指定的宽度和高度时应该如何处理。设置为hidden意味着任何超出元素框的内容都将被裁剪，不可见。
  border-radius: 10rpx;
  font-size: 24rpx;
  overflow: hidden;
  text{
    color: black;
  }
  
  //可以在此处配置样式
  .iconfont{
    font-size: 24rpx;
  }
}

//商品导航区
.good-nav{
  
  display: flex;
  justify-content: space-between;
  background-color:brown;
  padding: 20rpx 16rpx;

  view{
    navigator{
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    image{
      width:80rpx;
      height: 80rpx;
      //设置圆角半径,如果设置为50%，则会变成原型
      border-radius: 50%;
    }

    text{
      color:black;
      font-size: 24rpx;
      margin-top: 12rpx;
    }
  }
}

.good-hot{
  background-image: url("https://wanx.alicdn.com/wanx/1995581973794280/text_to_image/f3e45cfa78c1404eb3c276babc46050d_0.png?x-oss-process=image/watermark,image_d2FueC93YXRlcm1hcmsvcWlhbndlbl93YXRlcm1hcmsucG5n,t_80,g_se,x_30,y_30/format,webp");
  .scroll-x{
    width: 100%;
    white-space: nowrap;

    view{
      display: inline-block;
      width: 320rpx;
      height: 420rpx;
      margin-right: 16rpx;
      
      .good-item{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
      
      text{
        color: black;
        font-size: 26rpx;
        
      }

      image{
        width: 100%;
        height: 320rpx;
      }
    }
  }

  .slide{
    height: 20rpx;
    position: absolute;
    left: 50%;
    z-index: 9999;
    margin-left: -50rpx;

    .slide{
      .slide-bar{
        width: 100rpx;
        margin:0 auto;
        height: 10rpx;
        background: #eee;

        .slide-show{
          height: 100%;
          border-radius: 8rpx;
          background-color: #00aeff;
        }
      }
    }
  }
}

.bg-image{
  height: 400rpx;
  //小程序背景图的地址不能写本地路径
  //只能用网络图片或者base64格式的图片
  // background-image: url("/pages/img/product1.jpg");//无效
  // background-image: url(https://s1.best-wallpaper.net/wallpaper/m/1804/Seascape-Iceland-mountains-grass-sea_m.webp);//有效
  //有效，所以可以将本地图片转换成base64再进行使用（不建议，因为很长）
  background-image: url();
}

// .scroll-x{
//   width: 100%;
//   white-space: nowrap;
//   background-color: skyblue;

//   view{
//     display: inline-block;
//     width: 300rpx;
//     height: 80rpx;

//     &:first-child{
//       background-color: slategray;
//       color: lightsalmon;
//     }
//     &:last-child{
//       background-color: lightseagreen;
//     }
//   }
// }

// .scroll-y{
//   height: 180rpx;
//   margin-top: 10rpx;
//   background-color: skyblue;

//   view{
//     width: 100%;
//     height: 80rpx;

//     &:first-child{
//       background-color: slategray;
//       color: lightsalmon;
//     }
//     &:last-child{
//       background-color: lightseagreen;
//     }
//   }
// }



